<template>
  <div class="app-container">
    <el-card class="review-detail-card">
      <!-- 标题 -->
      <div class="title-section">
        <h1>{{ form.title }}</h1>
      </div>

      <!-- 基本信息 -->
      <div class="meta-section">
        <div class="meta-item">
          <span class="label">来源：</span>
          <span class="value">{{ form.source || '未知来源' }}</span>
        </div>
        <div class="meta-item">
          <span class="label">作者：</span>
          <span class="value">{{ form.author || '未知作者' }}</span>
        </div>
        <div class="meta-item">
          <span class="label">发布日期：</span>
          <span class="value">{{ parseTime(form.publishTime, '{y}-{m}-{d}') }}</span>
        </div>
        <div class="meta-item">
          <span class="label">所属栏目：</span>
          <span class="value">{{ categoryName }}</span>
        </div>
      </div>

      <!-- 内容 -->
      <div class="content-section">
        <div class="content-header">内容详情</div>
        <div class="content-body" v-html="form.content"></div>
      </div>

      <!-- 封面图 -->
      <div class="image-section" v-if="form.coverImage">
        <div class="content-header">封面图片</div>
        <div class="image-preview">
          <image-preview :src="form.coverImage" :width="300" :height="200"/>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-section">
        <el-button type="success" size="large" @click="handlePass">通过</el-button>
        <el-button type="danger" size="large" @click="handleReject">不通过</el-button>
        <el-button size="large" @click="handleBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="ReviewDetail">
import { getReview, updateReview } from "@/api/review/review.js"
import { listCategory } from "@/api/content/category.js"

const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

const form = ref({})
const categoryName = ref('')
const categoryList = ref([])

/** 获取资讯详情 */
function getDetail() {
  const articleId = route.query.articleId
  if (!articleId) {
    proxy.$modal.msgError('文章ID不能为空')
    return
  }

  getReview(articleId).then(response => {
    form.value = response.data
    // 获取栏目名称
    getCategoryName(form.value.categoryId)
  })
}

/** 获取栏目名称 */
function getCategoryName(categoryId) {
  listCategory().then(response => {
    categoryList.value = response.data
    const category = categoryList.value.find(cat => cat.categoryId === categoryId)
    categoryName.value = category ? category.categoryName : '未知栏目'
  })
}

/** 通过审核 */
function handlePass() {
  proxy.$modal.confirm('确认通过该资讯吗？').then(() => {
    const updateData = {
      ...form.value,
      status: '1' // 已发布
    }

    console.log('更新数据:', updateData)

    updateReview(updateData).then(response => {
      console.log('更新响应:', response)
      if (response.code === 200) {
        proxy.$modal.msgSuccess('审核通过')
        handleBack()
      } else {
        proxy.$modal.msgError('审核失败: ' + response.msg)
      }
    }).catch(error => {
      console.error('更新错误:', error)
      proxy.$modal.msgError('审核失败')
    })
  })
}

/** 不通过审核 */
function handleReject() {
  proxy.$modal.confirm('确认不通过该资讯吗？').then(() => {
    const updateData = {
      ...form.value,
      status: '2' // 未通过
    }

    console.log('更新数据:', updateData)

    updateReview(updateData).then(response => {
      console.log('更新响应:', response)
      if (response.code === 200) {
        proxy.$modal.msgSuccess('审核不通过')
        handleBack()
      } else {
        proxy.$modal.msgError('审核失败: ' + response.msg)
      }
    }).catch(error => {
      console.error('更新错误:', error)
      proxy.$modal.msgError('审核失败')
    })
  })
}

/** 返回列表 */
function handleBack() {
  // 使用路由名称返回
  router.push({ name: 'Review' })
}

getDetail()
</script>

<style scoped>
.review-detail-card {
  max-width: 1000px;
  margin: 0 auto;
}

.title-section {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6e6e6;
}

.title-section h1 {
  color: #333;
  font-size: 24px;
  margin: 0;
}

.meta-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item .label {
  font-weight: bold;
  color: #666;
  margin-right: 5px;
}

.meta-item .value {
  color: #333;
}

.content-section {
  margin-bottom: 30px;
}

.content-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.content-body {
  line-height: 1.8;
  color: #333;
  min-height: 200px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
}

.image-section {
  margin-bottom: 30px;
}

.image-preview {
  text-align: center;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #f8f9fa;
}

.action-section {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
}

.action-section .el-button {
  margin: 0 10px;
  min-width: 100px;
}
</style>